.mine {
  .ml-5 {
    margin-left: 10rpx;
  }

  .mt-17 {
    margin-top: 34rpx;
  }

  .ml-11 {
    margin-left: 22rpx;
  }

  &.page {
    background-color: #f5f6fa;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .section {
      padding: 24rpx 28rpx 100rpx 28rpx;

      .form-container {
        background: #fff;
        border-radius: 16rpx;
        padding: 24rpx 20rpx 0 20rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
        margin-bottom: 24rpx;

        // 表单项间距
        :deep(.uv-form-item) {
          margin-bottom: 30rpx;
          padding: 0 24rpx;
          padding-bottom: 30rpx;

          &:last-child {
            margin-bottom: 0;
            padding-bottom: 24rpx;
          }
        }

        // 标签样式
        :deep(.uv-form-item__body__left__label) {
          font-size: 28rpx;
          font-weight: 500;
          color: #000;
          margin-bottom: 25rpx;
          line-height: 1.4;
        }
      }

      .mine.page .section .form-item .input {
        width: 90%;
        height: 72rpx;
        background: #f5f6fa;
        border-radius: 8rpx;
        border: 1rpx solid #dadbde;
        font-size: 28rpx;
        color: #333;
        padding: 0 16rpx;
        margin-bottom: 0;
        margin-top: 8rpx;
      }

      .upload-desc {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 16rpx;
        line-height: 1.5;
      }

      .upload-btn {
        width: 120rpx;
        height: 160rpx;
        border: 1rpx dashed #ccc;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #666;
        font-size: 28rpx;
        background: #f5f6fa;
        border-radius: 8rpx;
        transition: all 0.3s ease;

        .camera-icon {
          width: 48rpx;
          height: 48rpx;
          margin-bottom: 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        &:active {
          border-color: #22306a;
          background: #e8eaed;
          color: #22306a;
        }
      }

      // 证件类型选择器样式
      .picker-input {
        width: 100%;
        height: 72rpx;
        background: #f5f6fa;
        border-radius: 8rpx;
        border: 1rpx solid #dadbde;
        font-size: 28rpx;
        color: #333;
        padding: 0 16rpx;
        margin-top: 8rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;

        .picker-text {
          flex: 1;
          text-align: left;
          
          &.placeholder {
            color: #999;
          }
        }

        .picker-arrow {
          width: 32rpx;
          height: 32rpx;
          flex-shrink: 0;
        }
        
        // 只读模式下的禁用样式
        &.picker-disabled {
          background: #f8f8f8;
          border-color: #e8e8e8;
          cursor: not-allowed;
          
          .picker-text {
            color: #999;
            &.placeholder {
              color: #999;
            }
          }
        }
      }

      .flex-row {
        display: flex;
        align-items: center;
      }

      .get-code-btn {
        margin-left: 16rpx;
        height: 74rpx;
        min-width: 140rpx;
        background: #f5f6fa;
        color: #22306a;
        border-radius: 8rpx;
        font-size: 28rpx;
        border: none;
        font-weight: 500;
        transition: all 0.3s ease;
        line-height: 74rpx;

        &:active {
          background: #22306a;
          color: #fff;
        }

        &:disabled {
          background: #f5f6fa;
          color: #999;
        }
      }

      .agreement-row {
        display: flex;
        align-items: flex-start;
        margin: 32rpx 0 0 0;
        padding: 20rpx;
        background: #f5f6fa;
        border-radius: 8rpx;
        gap: 0;

        :deep(.uv-checkbox-group) {
          flex: inherit;
          margin: 0;
          padding: 0;
          display: flex;
          align-items: flex-start;
        }
      }

      .agreement-text {
        font-size: 24rpx;
        color: #666;
        margin-left: -4rpx;
        line-height: 1.4;
        word-break: break-all;
        word-wrap: break-word;
        flex: 1;
        min-width: 0;
        letter-spacing: 0;
        padding-top: 2rpx;
      }

      .link {
        color: #22306a;
        text-decoration: none;
        margin: 0 2rpx;
        font-weight: 500;

        &:active {
          text-decoration: underline;
        }
      }

      .footer-bar {
        display: flex;
        align-items: center;
        padding: 32rpx 24rpx;
        background: #fff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
        margin-top: 24rpx;
      }

      .footer-home {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 32rpx;
        width: 80rpx;
        padding: 16rpx 0;
        border-radius: 8rpx;
        transition: all 0.3s ease;

        &:active {
          background: #f5f6fa;
        }
      }

      .home-icon {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 8rpx;
      }

      .home-text {
        font-size: 22rpx;
        color: #666;
        font-weight: 500;
      }

      .save-btn {
        flex: 1;
        height: 72rpx;
        background: #22306a;
        color: #fff;
        font-size: 30rpx;
        border-radius: 12rpx;
        border: none;
        text-align: center;
        font-weight: 600;
        margin-left: 16rpx;
        letter-spacing: 2rpx;
        line-height: 72rpx;
        transition: all 0.3s ease;

        &:active {
          opacity: 0.8;
        }
      }

      .verify-row {
        display: flex;
        align-items: center;
        gap: 16rpx;
      }

      .verify-input {
        flex: 1;
      }

      // 自定义 AreaPicker 显示样式
      :deep(.area-picker .picker-row) {
        width: 94%;
        height: 56rpx;
        background: #f5f6fa;
        border-radius: 8rpx;
        padding: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8rpx;
      }

      :deep(.area-picker .picker-row .picker-value) {
        font-size: 28rpx;
        color: #333;
        font-weight: 400;
      }

      :deep(.area-picker .picker-row .picker-value.placeholder) {
        color: #999;
      }

      :deep(.area-picker .picker-row .arrow) {
        width: 32rpx;
        height: 32rpx;
        opacity: 0.6;
      }

      /* 统一 uv-input 样式 */
      :deep(.form-container .uv-form-item .uv-input) {
        width: 90%;
        background: #f5f6fa;
        border-radius: 8rpx;
        padding: 0 16rpx;
        border: none;
      }

      :deep(.form-container .uv-form-item .uv-input__content) {
        min-height: 56rpx;
        display: flex;
        align-items: center;
      }

      :deep(.form-container .uv-form-item .uv-input__content__field) {
        font-size: 28rpx;
        color: #333;
        font-weight: 400;
      }

      :deep(.form-container .uv-form-item .uv-input__placeholder) {
        color: #999;
        font-size: 28rpx;
      }

      // 复选框样式优化
      :deep(.uv-checkbox) {
        margin-right: 0;
        margin: 0;
        padding: 0;
      }

      :deep(.uv-checkbox__icon-wrap) {
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        border: 1rpx solid #ddd;
        transition: all 0.3s ease;
        margin: 0;
        flex-shrink: 0;
      }

      :deep(.uv-checkbox__icon-wrap--checked) {
        background: #22306a;
        border-color: #22306a;
      }

      :deep(.uv-checkbox__icon-wrap--checked .uv-checkbox__icon) {
        color: #fff;
        font-size: 18rpx;
      }
    }

    .text-wrapper {
      width: 92%;
      height: 72rpx;
      background: #22306a;
      box-shadow: 0 2rpx 8rpx rgba(34, 48, 106, 0.2);
      border-radius: 12rpx;
      border: unset !important;
      margin: 32rpx 4% 0 4%;

      &::after {
        border: unset !important;
      }

      .text {
        color: #fff;
        font-size: 30rpx;
        font-family: 'PingFang SC';
        line-height: 72rpx;
        font-weight: 600;
      }
    }
  }

  // 协议勾选区域样式
  .agreement-section {
    padding-bottom: 60rpx;
    padding-top: 60rpx;

    .agreement-item {
      display: flex;
      align-items: flex-start;
      padding: 0 20rpx;

      .checkbox {
        width: 32rpx;
        height: 32rpx;
        border: 2rpx solid #ddd;
        border-radius: 6rpx;
        margin-right: 16rpx;
        margin-top: 4rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;

        &.checked {
          background: #1a73e8;
          border-color: #1a73e8;
        }

        .checkmark {
          color: #fff;
          font-size: 20rpx;
          font-weight: bold;
        }
      }

      .agreement-text {
        flex: 1;
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;

        .link {
          color: #1a73e8;
        }
      }
    }
  }

  // 弹出层样式
           .popup-content {
      background: #fff;
      border-radius: 24rpx 24rpx 0 0;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 32rpx 24rpx;
    border-bottom: 1rpx solid #f0f0f0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;

    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }

    .close-btn {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f5f5f5;

      .close-icon {
        font-size: 32rpx;
        color: #666;
        font-weight: bold;
      }
    }
  }

                       .popup-body {
       flex: 1;
       padding: 24rpx 48rpx 32rpx 48rpx;
       max-height: calc(90vh - 120rpx);
       width: 93%;
      
      // 确保 scroll-view 内容能够正确显示
      :deep(scroll-view) {
        height: 100%;
        width: 100%;
      }
      
      // 确保 MpHtmlWrapper 内容能够完整显示
      :deep(.mp-html-wrapper) {
        width: 100%;
        min-height: 100%;
        padding: 0;
        margin: 0;
      }
      
             // 确保协议内容能够完整显示
       :deep(.mp-html-content) {
         width: 100%;
         word-wrap: break-word;
         word-break: break-all;
         white-space: pre-wrap;
         line-height: 1.6;
         font-size: 28rpx;
         color: #333;
         padding: 0 48rpx;
         box-sizing: border-box;
       }
    }

                                               .loading-content,
      .error-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 200rpx;
        color: #666;
        font-size: 28rpx;
        padding: 0 48rpx;
        text-align: center;

           .retry-btn {
       margin-top: 24rpx;
       padding: 16rpx 32rpx;
       background: #007aff;
       color: #fff;
       border-radius: 8rpx;
       font-size: 28rpx;
     }
   }
   
       // 协议内容样式，参考 login.vue
    .agreement-content {
      .agreement-text {
        font-size: 28rpx;
        line-height: 1.6;
        color: #333;
        white-space: pre-wrap;
        padding: 0 48rpx;
      }
    }
}